<template>
	<view class="navbar">
		<view class="statusbar"></view>
		<view class="uni-flex mynav">
			<view class="left">
				总价:<text>{{ this.totalprice }} 元</text>
			</view>
			<view class="right">
				<navigator url="../amountDetail/amountDetail">详情</navigator>
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<view class="title">展开尺寸</view>
			<input class="uni-input" placeholder="展开尺寸(长度)mm" v-model="chicun_chang"/>
		</view>
		<view class="uni-form-item uni-row">
			<view class="title">展开尺寸</view>
			<input class="uni-input" placeholder="展开尺寸(宽度)mm" v-model="chicun_kuan"/>
		</view>
		<view class="uni-form-item uni-row">
			<view class="title">印刷数量</view>
			<input class="uni-input" placeholder="印刷数量(张)" v-model="yinshua_num" @blur="getnum"/>
		</view>
		<view class="uni-form-item uni-row">
			<!-- 纸张克重 -->
			<view class="title">纸张克重</view>
			<view class="uni-list-cell-db">
				<picker @change="paperPickerChange" :value="paperindex" :range="paperarray">
				<view class="uni-flex">
					<view class="uni-input weight" style="">{{paperarray[paperindex]}} g/张</view>
					<uni-icons class="icons" type="right" size="20"></uni-icons>
				</view>
				</picker>
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<!-- 纸张单价 -->
			<view class="title">纸张单价</view>
			<view class="uni-input" :disabled = "true">
				{{ this.zhizhang_danjia }} 元/张
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<!-- 刀版费用 -->
			<view class="title">刀版费用</view>
			<view class="uni-list-cell-db">
				<picker @change="daoPickerChange" :value="daoindex" :range="daoarray" range-key="db">
				<view class="uni-flex">
					<view class="uni-input weight">{{ daoarray[daoindex].db }} / {{ daoarray[daoindex].price }}元</view>
					<uni-icons class="icons" type="right" size="20"></uni-icons>
				</view>
				</picker>
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<!-- 覆膜费用 -->
			<view class="title">覆膜费用</view>
			<view>
				<radio-group>
					<label class="label radio"><radio color="#55007f" value="r1" checked="true" />哑膜</label>
					<label class="label radio"><radio color="#55007f" value="r2" />亮膜</label>
					<label class="label radio"><radio color="#55007f" value="r3" />不覆膜</label>
				</radio-group>
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<!-- 粘盒费用 -->
			<view class="title">粘盒费用</view>
			<input class="uni-input" focus placeholder="免费粘盒" :disabled="true"/>
		</view>
		<uni-fab :content="content" @trigger="trigger"></uni-fab>
	</view>
</template>

<script>
	import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue';
	export default {
		components: {
			uniFab
		},
		data() {
			return {
				paperarray: [4, 4.5, 5, 6],
				daoarray: [
					{db: '对开',price: 10},
					{db: '四开',price: 15},
					{db: '八开',price: 20}
				],
				paperindex: 0,
				daoindex: 0,
				chicun_chang: '',		// 尺寸长度
				chicun_kuan: '',		// 尺寸宽度
				yinshua_num: '',			// 印刷数量
				zhizhang_danjia: 0.3,	// 纸张单价
				zhanhe_price: '',		// 粘盒费用
				fabindex: 0,
				content: [
					{
						text: '首页',
						iconPath: '/static/indexIcon/首页.png',
						selectedIconPath: '/static/indexIcon/首页(选中).png',
						active: true
					},
					{
						text: '计价明细',
						iconPath: '/static/indexIcon/明细.png',
						selectedIconPath: '/static/indexIcon/明细(选中).png',
						active: false
					},
					{
						text: '计价依据',
						iconPath: '/static/indexIcon/依据.png',
						selectedIconPath: '/static/indexIcon/依据(选中).png',
						active: false
					},
					{
						text: '退出',
						iconPath: '/static/indexIcon/退出.png',
						selectedIconPath: '/static/indexIcon/退出(选中).png',
						active: false
					}
				],
			}
		},
		onLoad() {
			var login = uni.getStorageSync("token");
			if(!login) {
				uni.showToast({
					title: '用户未登录',
					icon: 'none'
				})
				uni.navigateTo({
					url: '../login/login'
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "首页"
			})
		},
		computed: {
			totalprice: function() {
				var totalprice = 0;
				totalprice = this.zhizhang_danjia * this.yinshua_num + this.daoarray[this.daoindex].price
				return totalprice.toFixed(1)
			}
		},
		methods: {
			// 纸张克重下拉框
			paperPickerChange: function(e) {
				this.paperindex = e.detail.value
				if(e.detail.value == 0) {
					this.zhizhang_danjia = 0.3
				} 
				if(e.detail.value == 1) {
					this.zhizhang_danjia = 0.4
				} 
				if(e.detail.value == 2) {
					this.zhizhang_danjia = 0.5
				} 
				if(e.detail.value == 3) {
					this.zhizhang_danjia = 0.6
				}
				this.totalprice = this.zhizhang_danjia * this.yinshua_num
			},
			//刀版费用下拉框
			daoPickerChange: function(e) {
				this.daoindex = e.detail.value
			},
			// 输入印刷数量后隐藏软键盘
			getnum(e) {
				uni.hideKeyboard();
			},
			trigger(e) {
				if(this.fabindex == e.index) {
					uni.showToast({
						title: '当前已在该页面,请勿重复切换',
						icon: 'none'
					})
				}
				this.content.forEach(function(item) {
					item.active = false;
				})
				e.item.active = true
				switch(e.index) {
					case 0: 
						uni.reLaunch({
							url: '/pages/index/index'
						})
					case 1:
						// uni.navigateTo({
						// 	url: '/pages/amountDetail/amountDetail'
						// })
						break;
					case 2: 
						// uni.navigateTo({
						// 	url: '/pages/priceBasis/priceBasis'
						// })
						break;
					case 3:
						uni.clearStorageSync('token')
						uni.reLaunch({
							url: '/pages/login/login'
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		.statusbar {
			height: var(--status-bar-height);
		}
		.mynav {
			background-color: #aaaaff;
			padding: 0 25rpx;
			color: #ffffff;
			line-height: 88upx;
			height: 88upx;
			.left {
				width: 75%;
				text {
					font-size: 40upx;
				}
			}
			.right {
				width: 25%;
				text-align: right;
			}
		}
	}
	.uni-form-item {
		border-bottom: 1upx solid #d9d9d9;
		.uni-input {
			text-align: right;
		}
	}
	.icons {
		width: 20px;
		height: 50rpx;
		padding: 15rpx 5rpx;
		line-height:50rpx;
		font-size:28rpx;
		background:#FFF;
	}
	.label {
		padding: 0 10upx;
	}
</style>
